<!-- 好评修改 -->
<template>
	<view class="form-container">
		<nt-card label="好评修改" v-for="(item,index) in params.praise" :key="index">
			<view class="add" @tap="item.review_status!=1?changeList(index):null">
				{{index==0?'+':'-'}}
			</view>
			<view class="platform-title">
				好评平台
			</view>
			<view class="platform-box">
				<view :class="{ platformActive: item.platform === it}" class="platform-type"
					v-for="it in praisePlatformList" :key="it.value" @tap="selectPlatform(item,it)">
					{{ it}}
				</view>
			</view>
			<view class="nt-submit-item pad">
				<view class="nt-submit-item__evaluate">
					<view class="platform-title">
						好评类型
					</view>
					<view class="nt-submit-item__evaluate--list flex">
						<!-- active -->
						<view class="nt-submit-item__evaluate--item" :class="{ active: it.click }"
							v-for="it in item.praiseTypeList" :key="it.value"
							@tap="item.review_status!=1?changeType(it,item.praiseTypeList):null">
							<view class="nt-submit-item__evaluate--item-title">{{ it.name }}</view>
							<view class="nt-submit-item__evaluate--item-desc">{{ it.description }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="nt-submit-item pad">
				<view class="nt-submit-item__upload">
					<view class="nt-submit-item__upload--title">
						上传好评截图 <text>（申请奖励）</text>
					</view>
					<view class="nt-submit-item__upload--btn">
						<nt-upload :mode="item.review_status!=1?'upload':'preview'" @success="uploadImage($event,item)"
							:images="item.images" :maxCount="1"></nt-upload>
					</view>
				</view>
			</view>
		</nt-card>
		<view class="fiexdFooter">
			<u-button @click="submit" color="#2d7ffd">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getOrderPraiseSelect,
		postOrderPraiseSelect,
		getCommonFormConfig
	} from "@/api"
	export default {
		data() {
			return {
				praiseTypeList: [],
				is_praise: "",
				listIndex: 1,
				params: {
					"realorder_id": "",
					"mode": "postPraise",
					"praise": []
				},
				praisePlatformList: []
			}
		},
		async onLoad(e) {
			this.params.realorder_id = e?.id ?? 232842
			await this.getFormConfig()
			await this.getList()
		},
		methods: {
			selectPlatform(item, value) {
				item.platform = value
				this.$forceUpdate()
			},
			uploadImage(e, item) {
				item.images = e.map(o => o.url)
			},
			changeList(index) {
				if (index == 0) {
					this.listIndex += this.listIndex
					let praiseTypeList = JSON.parse(JSON.stringify(this.praiseTypeList))
					this.params.praise.push({
						listIndex: this.listIndex,
						praiseTypeList,
						platform: '大众'
					})
				} else {
					this.params.praise.splice(index, 1)
				}
			},
			changeType(it, praise) {
				praise.forEach(o => o.click = false)
				it.click = true
				this.$forceUpdate()
			},
			async submit() {
				let params = JSON.parse(JSON.stringify(this.params))
				try {
					params.praise = params.praise.map(o => {
						return {
							...o.praiseTypeList.find(e => e.click),
							images: o.images,
							platform: o.platform
						}
					}).map(item => ({
						praise_type: item.value,
						images: item.images[0],
						platform: item.platform
					}))
					let error = params.praise.filter(o => o.images === undefined)
					if (error.length > 0) {
						throw new Exception("图片出现空");
					}
					const {
						code,
						msg
					} =
					await postOrderPraiseSelect(params)
					if (code === 1) {
						this.toast(msg)
						setTimeout(() => this.back(), 1000)
					}
				} catch (e) {
					this.toast('请选择选项和上传图片')
					//TODO handle the exception
				}
			},
			// 订单详情
			async getFormConfig() {
				let {
					code,
					data: {
						praiseTypeList,
						praisePlatformList
					}
				} = await getCommonFormConfig(this.params.realorder_id,
					this.params.mode)
				if (code == 1) {
					praiseTypeList.forEach(o => o.click = false)
					this.praiseTypeList = JSON.parse(JSON.stringify(praiseTypeList))
					this.praisePlatformList = praisePlatformList
					this.params.praise.push({
						praiseTypeList,
						images: [],
						platform: '大众'
					})
				}
			},
			async getList() {
				const {
					code,
					data
				} = await getOrderPraiseSelect({
					realorder_id: this.params.realorder_id
				})
				if (code === 1) {
					if (data.length > 0) {
						data.forEach(o => {
							o.images = [o.images]
						})
						data.forEach(o => o.praiseTypeList = JSON.parse(JSON.stringify(this.praiseTypeList)))
						data.forEach((o, i) => o.praiseTypeList.find(item => item.value == o.praise_type).click = true)
						console.log(data)
						this.params.praise = data
						this.$forceUpdate()
					}
				}
			}
		},

	}
</script>
<style scoped lang="scss">
	.nt-submit {
		&-item {
			&__evaluate {
				&--list {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
				}

				&--item {
					width: 48%;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
					border: 1rpx solid #CCCCCC;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					height: 120rpx;
					color: #333;

					&.active {
						color: #fff;
						background: #2D7FFD;
						color: #fff;
					}

					&--item:nth-child(2n) {
						margin-left: 4%;
					}

					&-title {
						font-size: 24rpx;
						font-weight: bold;
					}

					&-desc {
						font-size: 20rpx;
						margin-top: 10rpx;
					}
				}
			}

			&__upload {
				padding: 40rpx 10rpx;
				box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

				&--title {
					font-size: 24rpx;
					color: #aaa;
					margin-bottom: 20rpx;

					text {
						color: var(--theme-color)
					}
				}
			}
		}
	}
</style>
<style scoped lang="scss">
	.form {
		&-container {
			margin: 20rpx;
			box-sizing: border-box;
			padding-bottom: 160rpx;

			// background:#fff;
			/deep/ .nt-card {
				margin-bottom: 20rpx;
				border-radius: 20rpx;
			}
		}

		&-item {
			display: flex;
			margin-top: 20rpx;

			&.vertical {
				flex-direction: column;
			}

			&.horizontal {
				flex-direction: row;
				align-items: center;
			}

			&__label {
				font-size: 26rpx;
				color: #333;
				height: 80rpx;
				line-height: 80rpx;
				width: 140rpx;
				font-weight: bold;
			}

			&__content {
				flex: 1;
				position: relative;

				.iconfont {
					position: absolute;
					top: 50%;
					right: 20rpx;
					transform: translateY(-50%);
				}

				/deep/ .u-textarea {
					min-height: 225rpx;
					border-radius: 20rpx;
					padding: 10rpx;
					box-sizing: border-box;

					.uni-textarea-textarea {
						height: 100%
					}

					.uni-textarea-wrapper {
						min-height: 100%;
					}

					&.u-border {
						border-width: 1rpx;
						border-style: solid;
						border-color: #F8D4B9 !important;
					}
				}

				/deep/ .u-input {
					box-sizing: border-box;

				}
			}
		}
	}

	.add {
		position: absolute;
		top: calc(80rpx - 50rpx);
		right: 20rpx;
		height: 50rpx;
		width: 50rpx;
		display: flex;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		background-color: #2D7FFD;
		color: #fff;
	}

	::v-deep .nt-card {
		position: relative;
	}

	$bg-color: #F6F5FA;

	.fiexdFooter {
		height: 160rpx;
		background: $bg-color;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		/deep/ .button-container {
			width: 100%;
		}
	}

	.platform {
		&-title{
			
				margin-bottom: 20rpx;
				font-size: 28rpx;
				font-weight: bold;
		}

		&-type {
			font-size: 28rpx;
			flex: 1 0 0;
			text-align: center;
			line-height: 50rpx;
			border: 0.5px solid #CCCCCC;
			border-radius: 25rpx;

			&:nth-child(2) {
				margin: 0 20rpx;
			}

		}

		&-box {
			display: flex;
			margin: 20rpx 0;
		}

	}

	.platformActive {
		color: #fff;
		background: #2D7FFD;
		color: #fff;
	}
</style>